
<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>态势图叠加</title>
    <style type="text/css">
        body{
             margin: 0;
             overflow: hidden;
             background: #fff;
         }
        #map{
            position: relative;
            height: 510px;
            border:1px solid #3473b7;
        }
        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src="js/jquery.js"></script>
    <script src="js/fileupLoad.js"></script>
    <script src="../libs/SuperMap.Include.js"></script>
    <script type="text/javascript">
        var map, local, layer, vectorLayer, control, queryBounds, markerLayer,drawFeature;
        var plottingLayer,plottingEdit, sitManager,ListFile,plotting;
		
        var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
        var mapurl = host + "/iserver/services/map-china400/rest/maps/China_4326";
        var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
		
        function init() {
            map = new SuperMap.Map("map",{controls: [
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })]
            });
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", mapurl, {transparent: true, cacheEnabled: true},{maxResolution:"auto"});
            layer.events.on({"layerInitialized":addLayer});


            plottingLayer = new SuperMap.Layer.PlottingLayer("标绘图层", serverUrl);
            plottingLayer.style = {
                fillColor: "#66cccc",
                fillOpacity: 0.4,
                strokeColor: "#66cccc",
                strokeOpacity: 1,
                strokeWidth: 3,
                pointRadius:6
            };

            //态势标绘编辑
            plottingEdit = new SuperMap.Control.PlottingEdit(plottingLayer);
            //添加态势标绘控件
            map.addControls([plottingEdit]);

            plotting = SuperMap.Plotting.getInstance(map, serverUrl);
            sitManager = plotting.getSitDataManager();
            sitManager.events.on({"addSmlFileCompleted": success,
                "addSmlFileFailed": fail,
                "addSmlFileToLayerCompleted": success,
                "addSmlFileToLayerFailed": fail,
                "openSmlFileCompleted": success,
                "openSmlFileFailed": fail});
        }
        function addLayer() {
            map.addLayers([layer, plottingLayer]);
            map.setCenter(new SuperMap.LonLat(104, 35), 3);
            fileFilter();
            plottingEdit.activate();
        }

        function add(){
            sitManager.addSmlFile('file', true);
        }
        function addtolayer(){
            sitManager.addSmlFileToLayer('file', "标绘图层");

        }
        function openfile(){
            sitManager.openSmlFile('file');
        }
        function clearlayer(){
            plottingEdit.deactivate();

            var layers = map.layers;
            for(var n = 0;n < layers.length; n++){
                if(layers[n].isEditable) {
                     layers[n].removeAllFeatures();
                }
            }
        }

        function fileFilter(){
            var file = document.getElementById('file');
            file.setAttribute("accept",".sml");
        }

        function success(){

        }

        function fail(){
            alert("打开/叠加态势图失败，请检查态势图内容是否正确");
        }
    </script>
</head>
<body onload="init()">
<div id="toolbar">
    <input type="file" id = "file" name="file"> </input>
    <input type="button" class="btn" value="叠加" onclick="add()" />
    <input type="button" class="btn" value="添加到指定图层" onclick="addtolayer()" />
    <input type="button" class="btn" value="打开" onclick="openfile()" />
    <input type="button" class="btn" value="清除" onclick="clearlayer()" />
</div>
<div id="map"></div>
</body>
</html>
